<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>举报网站</title>
    <link href="https://www.jxcn.cn/jbzx/css/entrance.css" rel="stylesheet" type="text/css" />
    <style>
        table label img {
            width: 40%;
        }

        .btn {
            outline: 0;
            border: 0;
            padding: 5px 13px;
            border-radius: 9999px;
            color: #fff;
            background: linear-gradient(#9cf482, #51e624);
            margin: 10px;
            cursor: pointer;
        }

        .sameStyle {
            color: red;
        }
    </style>
</head>

<body>
    <div class=wrap>
        <!--  <form id=main class=dataSubmit enctype=multipart/form-data onSubmit="return CheckForm(this);" method=post name=main >-->
        <form id=main action="{:url('/index/fromadd')}" class=dataSubmit enctype=multipart/form-data method=post
            name=main>
            <input value=attchupload2 type=hidden name=savePath />
            <div class=info>
                <h1><span>举报人基本信息</span></h1>
                <table border=0 cellspacing=0 cellpadding=0 width=620>
                    <tr>
                        <td height=30 align=right><strong>是否匿名：</strong></td>
                        <td>
                            <label><input name="is_nm" type="radio" value="1" checked id="is_name" />实名 </label>
                            <label><input name="is_nm" type="radio" value="2" id="is_name" />匿名 </label>
                        </td>
                    </tr>
                    <tr id="real_name">
                        <td height=30 align=right>
                            <strong>真实姓名：</strong>
                        </td>
                        <td>
                            <input id=userName type=text name=username class="required" />
                        </td>
                    </tr>
                    <tr>
                        <td height=30 align=right><strong>性别：</strong></td>
                        <td>
                            女<input id=sex value=1 checked type=radio name=sex />
                            男<input value=0 type=radio name=sex />
                        </td>
                    </tr>
                    <tr>
                        <td height=30 align=right><strong>电子邮箱：</strong></td>
                        <td>
                            <input id='email' size=35 type=text name=email onclick="check" />
                            <b>*</b>
                            <span class="email sameStyle">不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td height=30 align=right><strong>电话号码：</strong></td>
                        <td>
                            <input id=tel size=35 type=text name=phone class="required" />
                            <b>*</b>
                            <span class="phone sameStyle">不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td height=30 align=right><strong>地域：</strong></td>
                        <td>
                            <select name="area" msg="请选择城市" class="required">
                                <option value="" selected="selected">请选择--</option>
                                <option value="1">南昌市</option>
                                <option value="2">上饶市</option>
                                <option value="3">抚州市</option>
                                <option value="4">宣春市</option>
                                <option value="5">吉安市</option>
                                <option value="6">赣州市</option>
                                <option value="7">鹰潭市</option>
                                <option value="8">新余市</option>
                                <option value="9">九江市</option>
                                <option value="10">萍乡市</option>
                                <option value="11">景德镇市</option>
                            </select>
                            <b>*</b>
                            <span class="area sameStyle">不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td height=30 align=right><strong>通讯地址：</strong></td>
                        <td><input id=address size=35 type=text name=address />
                        </td>
                    </tr>
                    <tr>
                        <td height=30 align=right><strong>举报主体：</strong></td>
                        <td>
                            <label><input name="jbzt" type="radio" value="1" />公民 </label>
                            <label><input name="jbzt" type="radio" value="2" />法人及其他组织 </label>
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <h1><span>举报信息</span></h1>
                <table border=0 cellspacing=0 cellpadding=0 width=500>
                    <tr>
                        <td height=30 align=right width="30%"><strong>被举报类型：</strong></td>
                        <td><input type="hidden" id="jb_types" name="jb_types" value="" />
                            <select id=jb_type name=jb_type>
                                <option value="" selected="selected">请选择--</option>
                                <option value="0">网站</option>
                                <option value="1">搜索引擎</option>
                            </select>
                            <b>*</b>
                            <span class="jb_type sameStyle">不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td id=keywordstyle align=right><strong>举报关键字：</strong></td>
                        <td id=keywordstyle2 align=left><input id=search_keyword size=45 type=text
                                name=search_keyword />
                            <font color=red><b>*</b></font>
                            <span class="search_keyword sameStyle">不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td height=30 align=right><strong>网站名称：</strong></td>
                        <td><input id=web_name size=40 type=text name=web_name class="required" value="中国江西网" />
                            <b>*
                            </b>
                            <span class="web_name sameStyle">不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td height=30 align=right><strong>被举报网址(url)：</strong></td>
                        <td><input id=web_url value="http://www.jxnews.com.cn" size=40 type=text name=web_url
                                class="required" />
                            <b>*
                            </b>
                            <span class="web_url sameStyle">不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td height=30 align=right><strong>信息所在详细网址(url)：</strong></td>
                        <td><textarea id=web_url_content title="URL格式必须以:http:// 开头 。多个URL，请敲回车 。" rows=5 cols=45
                                name=web_url_content class="required">http://www.jxnews.com.cn</textarea>
                            <br />
                            <b>*</b>多个网址请回车再输入
                            <span class="web_url_content sameStyle">不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td height=30 align=right><strong>举报内容：</strong></td>
                        <td><textarea id=content rows=5 cols=45 name=jb_content class="required"></textarea>
                            <b>*
                            </b>
                            <span class="sameStyle jb_content">不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td height=30 align=right><strong>危害类型：</strong></td>
                        <td style="display:inline-block">
                            <select id="wh_type" name="wh_type">
                                <option value="">--请选择--</option>
                            </select>
                            <span class="wh_type sameStyle">不能为空</span>
                        </td>
                        <td id="full_name" style="display:inline-block;margin-left:20px">
                            <select name="wh_type_smart" id="wh_type_smart">
                                <option value="">--请选择--</option>
                            </select>
                            <span class="wh_type_smart sameStyle">不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td height=30 align=right><strong>验证码：</strong></td>
                        <td>
                            <label>{:captcha_img()}</label>
                            <input style="display: block" type="text" id="code" name="code" class="form-control"
                                placeholder="请输入验证码">
                        </td>
                    </tr>
                    <tr height=30 align=center>
                        <td style="text-align: center;">
                            &emsp;
                        </td>
                        <td style="text-align: left;">
                            &emsp;
                            <!--                        <input type="submit" value="添加" style="background-color: #9af082; width: 50px; border-radius: 10px; border: 1px solid #9af082; cursor: pointer;">-->
                            <!--                        <input type="reset" value="重置" style="background-color: #9af082; width: 50px; border-radius: 10px; border: 1px solid #9af082; cursor: pointer;">-->
                            <input type="submit" value="添加" class="btn" />
                            <input type="reset" value="重置" class="btn" />
                        </td>
                        <td>
                        </td>

                    </tr>
                </table>
            </div>
            <table class=xs border=0 cellspacing=0 cellpadding=0 width=550>
                <tbody>
                    <tr>
                        <td>举报电话：0791-86849275</td>
                    </tr>
                    <tr>
                        <td><span class="red">请您在正式提交举报之前确认以下内容：</span><br />
                            1、您应当保证所举报内容与事实一致。若您故意捏造和歪曲事实而造成的一切后果，由您自行承担。<br />
                            2、您应当允许工作委员会根据工作需要在保护您的个人权益的前提下，使用您的任何叙述。<br />
                            3、请您尽可能填写详实内容，以利于您举报问题的解决。<br />
                            4、工作委员会将及时处理您举报的有效内容。<br />
                            5、每个用户每小时只能举报三次<br />
                            6、如您有其它疑问，请认真阅读"&nbsp;<a href="### target=_blank>举报指南</A>"></a></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>
</body>
<script>
    const is_name = document.querySelectorAll('#is_name')
    const real_name = document.getElementById('real_name')
    for (let i = 0; i < is_name.length; i++) {
        is_name[i].addEventListener('change', function (e) {
            if (e.target.value == 1) {
                real_name.style.removeProperty('display')
            } else {
                real_name.style.display = 'none'
            }
        })
    }
    const typeDom = document.getElementById('wh_type');
    const detailDom = document.getElementById('wh_type_smart');
    let typeEnums = {
        '1': '政治类',
        '2': '暴恐类',
        '3': '诈骗类',
        '4': '色情类',
        '5': '低俗类',
        '6': '赌博类',
        '7': '侵权类',
        '8': '谣言类',
        '9': '专项举报'
    }
    const typeDetailEnums = {
        '1': [
            { value: "0", info: "攻击党和国家制度及重大方针政策" },
            { value: "2", info: "攻击“两个维护" },
            { value: "3", info: "危害国家安全、泄露国家秘密" },
            { value: "4", info: "破坏国家统一和领土完整" },
            { value: "5", info: "损害国家形象荣誉利益" },
            { value: "6", info: "破坏国家民族宗教政策、宣扬邪教" },
            { value: "7", info: "诋毁英雄烈士" },
        ],
        '2': [
            { value: "8", info: "宣扬暴力恐怖思想" },
            { value: "9", info: "教唆实施暴力恐怖活动" },
            { value: "10", info: "传授暴恐犯罪技能" },
            { value: "11", info: "传播暴力血腥视频、图片" },
        ],
        '3': [
            { value: "12", info: "仿冒运营商网站进行支付充值诈骗" },
            { value: "13", info: "仿冒银行网站进行支付交易诈骗" },
            { value: "37", info: "网络违法犯罪举报网站 " },
        ],
        '4': [
            { value: "14", info: "含有色情内容的信息" },
            { value: "15", info: "儿童色情信息" },
        ],
        '5': [
            { value: "16", info: "含有低俗内容的信息" },
        ],
        '6': [
            { value: "17", info: "网络博彩" },
            { value: "18", info: "其他含有赌博内容的信息" },
        ],
        '7': [
            { value: "19", info: "公共政策" },
            { value: "20", info: "社会安全" },
            { value: "21", info: "自然灾害" },
            { value: "22", info: "食药安全" },
            { value: "23", info: "卫生健康" },
            { value: "24", info: "科学知识" },
            { value: "25", info: "历史文化" },
        ],
        '8': [
            { value: "26", info: "个人隐私泄露" },
            { value: "27", info: "侮辱谩骂" },
            { value: "28", info: "诽谤诋毁" },
        ],
        '9': [
            { value: "31", info: "涉疫谣言举报" },
            { value: "32", info: "涉未成年人举报" },
            { value: "34", info: "互联网算法推荐专项举报" },
            { value: "34", info: "养老诈骗专项举报" },
            { value: "34", info: "涉网络暴力有害信息举报" },
        ],
    }
    for (const key in typeEnums) {
        const option = document.createElement('option')
        option.value = key
        option.text = typeEnums[key]
        typeDom.appendChild(option)
    }

    typeDom.addEventListener('change', function (e) {
        const typeValue = e.target.value
        // 置空元素
        detailDom.innerHTML = ''
        // 添加元素
        const params = typeDetailEnums[typeValue]
        if (params?.length <= 0 || params === void 0) {
            detailDom.innerHTML = "<option value=''>--数据为空--</option>"
            return
        }
        detailDom.innerHTML = "<option value=''>--请选择--</option>"
        for (const key in params) {
            const option = document.createElement('option')
            option.value = params[key].value
            option.text = params[key].info
            wh_type_smart.appendChild(option)
        }
    })
    let checkIsNull = (obj) => {
    }
    let check = () => { }
    let initState = () => {
        let tofil = [
            'area',
            'email',
            'phone',
            'jb_type',
            'jb_content',
            'search_keyword',
            'web_name',
            'web_url',
            'web_url_content',
            'wh_type_smart',
            'wh_type']
        tofil.forEach(item => {
            document.querySelector(`.${item}`).style.display = 'none';
        })
    }
    initState()
    const form = document.getElementById('main');
    form.addEventListener('submit', function (event) {
        initState()
        event.preventDefault();
        const formData = new FormData(form);
        const values = {};
        console.log('formData', formData);
        for (let [name, value] of formData) {
            values[name] = value;
        }
        console.log(values);
        let {
            area,
            email,
            phone,
            jb_content,
            savePath,
            search_keyword,
            web_name,
            web_url,
            web_url_content,
            wh_type_smart,
            wh_type
        } = values
        let toFil = {
            area,
            email,
            phone,
            jb_type,
            jb_content,
            search_keyword,
            web_name,
            web_url,
            web_url_content,
            wh_type_smart,
            wh_type
        }
        const emptyMembers = Object.keys(toFil).filter(key => toFil[key] === '');
        console.log('空值--->>>>', emptyMembers);
        emptyMembers.forEach(item => {
            document.querySelector(`.${item}`).style.display = 'block';
        })
        if (emptyMembers.length == 0) {
            form.submit();
        }
    });
</script>

</html>